<div>
    <input type="checkbox" id="panel-activer">
    <div class="panel-parent">
        <div class="side-panel">
            <div>
                <enters :parentData="parentData" ref="enters"></enters>
            </div>
        </div>
        <div class="self">
            <el-form    label-width="100%">
                <el-form-item label="" class="el-form-item-thin">
                </el-form-item>
            </el-form>
            <div class="consume-panel">
                <el-form :inline="true" ref="form" :model="form" label-position="left" label-width="80px">
                <!--<el-row>-->
                    <!--<el-form-item label="" class="el-form-item-thin">-->
                            <!--<el-checkbox  label="预约取消" v-model="form.appoCancle"  name="type"></el-checkbox>-->
                            <!--<el-checkbox label="审核通过" v-model="form.examinePass" name="type"></el-checkbox>-->
                            <!--<el-checkbox label="审核取消" v-model="form.examineCancle" name="type"></el-checkbox>-->
                            <!--<el-checkbox label="未审核" v-model="form.unExamine" name="type"></el-checkbox>-->
                    <!--</el-form-item>-->
                <!--</el-row>-->
                <el-form-item label="" prop="appoUnit":rules
                        ="[ { max:50, message: '长度不能超过50'}]"
                >
                    <el-autocomplete
                            class="inline-input"
                            v-model="form.appoUnit"
                            :fetch-suggestions="querySearchUnit"
                            placeholder="预约单位"
                    >
                    </el-autocomplete>
                </el-form-item>
                <el-form-item label="" prop="appoPhoneNum":rules
                        ="[ { max:50, message: '长度不能超过50'}]"
                >
                    <el-autocomplete
                            class="inline-input"
                            v-model="form.appoPhoneNum"
                            :fetch-suggestions="querySearchUnit"
                            placeholder="预约电话"
                    >
                    </el-autocomplete>
                </el-form-item>

                <el-form-item label="预约日期" >
                    <el-date-picker
                            v-model="form.startDate"
                            type="daterange"
                            align="right"
                            unlink-panels
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions2">
                    </el-date-picker>
                    <!--<el-date-picker-->
                            <!--v-model="form.startDate"-->
                            <!--type="date"-->
                            <!--placeholder="开始日期"-->
                            <!--format="yyyy-MM-dd"-->
                            <!--@change="pickStartDate"-->
                    <!--&gt;-->
                    <!--</el-date-picker>-->
                </el-form-item>
                <!--<el-form-item label="" >-->
                    <!--<el-date-picker-->
                            <!--v-model="form.endDate"-->
                            <!--type="date"-->
                            <!--placeholder="结束日期"-->
                            <!--format="yyyy-MM-dd"-->
                            <!--@change="pickEndDate"-->
                    <!--&gt;-->
                    <!--</el-date-picker>-->
                <!--</el-form-item>-->
                <el-form-item label=""  class = "transparent">
                    <el-button type="primary" @click="queryAppointment">查询</el-button>
                </el-form-item>
        </el-form>
            </div>
            <div class="consume-panel">
                <kf-table :url="urls.url" :pks="['appoId']" :page-size="20" ref="table" stripe >
                <el-table-column prop="appoUnit"  label="预约单位"  min-width="180">
                </el-table-column>
                <el-table-column prop="appoName"  label="预约人"  min-width="120">
                </el-table-column>
                <el-table-column prop="appoPhoneNum" label="联络人电话" width="120">
                </el-table-column>
                <el-table-column  prop="appoDate" label="预约时间" min-width="120" >
                </el-table-column>
                <el-table-column prop="flightInfo.flightNum" label="航班号" width="120">
                </el-table-column>
                <!--<el-table-column prop="status" label="状态" width="120">-->
                <!--</el-table-column>-->
                <el-table-column  prop="originating" label="出发地" min-width="120" >
                </el-table-column>
                <el-table-column prop="destination" label="目的地" min-width="120">
                </el-table-column>

                <el-table-column prop="flightProperty" label="航线性质" min-width="120">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="180" >
                    <template scope="scope" >
                        <el-button type="text" @click="examineAppointment(scope)">详情</el-button>
                        <el-button type="text" @click="editAppointment(scope)">修改</el-button>
                        <el-button type="text" @click="passAppointment(scope,'预约取消')">取消</el-button>
                    </template>
                </el-table-column>
            </kf-table>
            </div>
        </div>
    </div>
</div>